<template>
	<view class="main">
	

		<u-parse :content='parse'></u-parse>

		<view class="vipselectmain">
			<view class="xflex-x-between vipselect" v-for="(item,index) in uviplist" :key="index">
				
				<view class="">
					{{item.name}}
				</view>
				<view class="xflex-x">
					<image v-if="form.grade_id == item.id" class="vipimg" src="../../static/image/gouxuan2.png" mode=""></image>
					<image v-else class="vipimg" @click="form.grade_id = item.id" src="../../static/image/gouxuan1.png" mode=""></image>
					<view class=""  @click="topage(`/pages/index/agreement?title=${item.name}&utype=1&id=${item.id}`)">
						查看
					</view>
				</view>
				
				
			</view>
			
			
		</view>
		<view class="ipt">
			<input type="text" class="xflex1" v-model="form.username" placeholder="请输入账号" />
		</view>
		<view class="ipt xflex-x-between">
			<input type="text" class="xflex1" :password="isPaw" v-model="form.password" placeholder="请输入密码" />
			<image class="ipt-icon" v-if="isPaw" @click="isPaw = !isPaw" src="/static/image/icon_bxx.png" mode="">
			</image>
			<image class="ipt-icon" v-if="!isPaw" @click="isPaw = !isPaw" src="/static/image/icon_xx.png" mode="">
			</image>
		</view>

		<view class="ipt xflex-x-between">
			<input type="text" class="xflex1" :password="isPaw1" v-model="form.pwd" placeholder="请输入密码" />
			<image class="ipt-icon" v-if="isPaw1" @click="isPaw1 = !isPaw1" src="/static/image/icon_bxx.png" mode="">
			</image>
			<image class="ipt-icon" v-if="!isPaw1" @click="isPaw1 = !isPaw1" src="/static/image/icon_xx.png" mode="">
			</image>
		</view>

		<view class="btn" :class="form.username && form.password && form.pwd ?'active':''" @click="sub">
			注册
		</view>


		<view class="xflex-x-center accord" @click="ischecjk()">
			<view class="flex">

				<image class="accord-img" :src="`/static/image/gouxuan${!checked?1:2}.png`" mode="">
				</image>
			</view>
			<view class="accord-text">
				我已阅读并同意
				<text @click="topage('/pages/index/agreement?title=用户协议&type=user_protoco')">《用户服务协议》</text>
				和
				<text @click="topage('/pages/index/agreement?title=隐私政策&type=privacy_policy')">《隐私政策》</text>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		onReachBottom,
		onShow,
		onLoad
	} from '@dcloudio/uni-app';
	import {
		reactive,
		ref
	} from "vue"
	import {
		register,
		indexconfig,
		userAuth,
		memberopen
	} from '@/network/home.js'
	import {
		topage
	} from '@/utils/common.js'
	import {
		useCounterStore
	} from '@/Store/index'
	const counter = useCounterStore()
	
	
	let uviplist = ref([])
	let uvipactive = ref()
	// 获取可注册会员等级
	memberopen().then(res=>{
		console.log(res);
		uviplist.value = res.data
		form.grade_id = res.data[0].id
	})

	// 密码是否显示
	let isPaw = ref(true)
	let isPaw1 = ref(true)

	// 是否同意协议
	let checked = ref(false)

	function ischecjk() {
		checked.value = !checked.value
	}

	let parse = ref()

	// content({name:'reg_ad'}).then(res=>{
	// 	console.log(res);
	// 	parse.value= res.data
	// })



	indexconfig().then(res => {
		console.log(res);
		parse.value= res.data.reg_ad
	})

	// 注册
	let form = reactive({
		username: '',
		password: '',
		pwd: "",
		grade_id:''
	})

	function code(data) {
		uni.login({
			provider: 'weixin', //使用微信登录
			success: function(loginRes) {
				console.log(loginRes.code);
				userAuth({
					code: loginRes.code
				}).then(res => {
					uni.switchTab({
						url: "/pages/index/index"
					})
					// if(data.data.userinfo.is_pay ==1) {
					// 	uni.redirectTo({
					// 		url:'/pages/mine/vip/vip'
					// 	})
					// }else{
					// 	uni.switchTab({
					// 		url:"/pages/index/index"
					// 	})
					// }

				})
			}
		})
	}
	// 登录
	const sub = async (e) => {
		if (!checked.value) {
			uni.showToast({
				icon: "none",
				title: '请勾选协议'
			})
			return
		}
		if (form.password != form.pwd) {
			uni.showToast({
				icon: "none",
				title: "两次密码不一致"
			})
			return
		}
		uni.showLoading({
			title: '加载中'
		});
		let res = await register(form)
		counter.setuser(res.data)
		uni.setStorage({
			key: 'token',
			data: res.data.userinfo.token,
			success: function(ress) {
				setTimeout(() => {
					code(res)
				}, 500)
				uni.showToast({
					icon: "none",
					title: "注册成功"
				})
			}
		})
	}
</script>

<style>
	page{
		background-color: #fff;
	}
</style>

<style lang="scss" scoped>
	
	.main{
		padding: 32rpx 60rpx;
		
	}
	.title {
		width: 100%;
		height: 59rpx;
		font-size: 62rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #333333;
		// line-height: 40rpx;
		margin-top: 32rpx;
	}
	.tips {

		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #666666;
		line-height: 40rpx;
		margin-top: 36rpx;
		margin-bottom: 161rpx;
	}
	.ipt {
		// width: 630rpx;
		// height: 110rpx;
		background: #F3F3F3;
		border-radius: 10rpx;
		padding: 38rpx 33rpx;
		margin-bottom: 36rpx;
		&:nth-child(1){
			margin-top: 161rpx;
		}
		&-icon{
			width: 40rpx;
			height: 40rpx;
		}
		// &>input{
			
		// }
	}
	.btn {
		width: 630rpx;
		height: 110rpx;
		background: #CCCCCC;
		border-radius: 10rpx;
		font-size: 36rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #999999;
		line-height: 110rpx;
		text-align: center;
	}
	.accord {
		margin-top: 40rpx;

		&-img {
			width: 24rpx;
			height: 24rpx;
			margin-right: 12rpx;
		}

		&-text {
			font-size: 24rpx;
			font-weight: 400;
			color: #909090;
			line-height: 33rpx;

			&>text {
				color: #ff3e00;
			}
		}
	}

	.ring {
		width: 28rpx;
		height: 28rpx;
		margin-right: 10rpx;
		border-radius: 50%;
		box-sizing: border-box;
		border: 1upx solid #909090;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	.active {
		background-color: #3F7233;
		color: #eee;
	}
	
	.vipimg {
		width: 32rpx;
		height: 32rpx;
		margin-right: 24rpx;
	}
	
	.vipselect {
		margin: 24rpx 0;
		font-size: 28rpx;
		padding: 0 24rpx;
		border-right: 1rpx solid #999;
		
		&:nth-child(2n){
			padding-right: 0;
			border: none;
		}
	}
	
	
	
	.vipselectmain {
		display: grid;
		grid-template-columns: 1fr 1fr; 
	}
</style>